<template>
    <div class="hero-list-container">
        <el-button class="btn-pos"
                   type="primary"
                   icon="el-icon-upload"
                   size="small"
                   @click="goAdd">补录
        </el-button>
        <el-tabs v-model="active"
                 type="card"
                 @tab-click="handleClick">
            <el-tab-pane
                    v-for="(item,index) in sortList"
                    :key="index"
                    :label="item.label"
                    :name="item.value.toString()"></el-tab-pane>
        </el-tabs>
        <el-table
                :data="listData"
                style="width: 100%">
            <el-table-column
                    label="贴图"
                    width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.src" alt="" width="48">
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名字"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="hp"
                    label="血量"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="damage"
                    label="伤害"
                    width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="goDetail(scope.$index, scope.row)">查看
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="goUpdate(scope.$index, scope.row)">编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                title="详情"
                :visible.sync="dialogVisible"
                width="60%">
            <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="贴图">
                    <img :src="itemDetailData.src" alt="" height="64">
                </el-form-item>
                <el-form-item label="类别">
                    <span>{{ changeType(itemDetailData.type) }}</span>
                </el-form-item>
                <el-form-item label="名称">
                    <span>{{ itemDetailData.name }}</span>
                </el-form-item>
                <el-form-item label="血量">
                    <span>{{ itemDetailData.hp }}</span>
                </el-form-item>
                <el-form-item label="伤害">
                    <span>{{ itemDetailData.damage }}</span>
                </el-form-item>
                <el-form-item label="分类">
                    <span>{{ itemDetailData.category }}</span>
                </el-form-item>
                <el-form-item label="特殊能力">
                    <span v-for="(item,index) in itemDetailData.ability"
                          :key="index">{{ item }}</span><br>
                </el-form-item>
                <el-form-item label="介绍">
                    <span>{{ itemDetailData.content }}</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "AniList",
        data() {
            return {
                active : 0,
                listData: [],
                dialogVisible: false,
                itemDetailData: {},
                sortList: [
                    {
                        label: '敌对生物',
                        value: 0,
                    },
                    {
                        label: '同盟生物',
                        value: 1,
                    }
                ]
            }
        },
        activated() {
            this.fetchListData(this.active);
        },
        methods: {
            /**
             * 类别切换
             * @param tab
             */
            handleClick(tab) {
                console.log(tab);
                this.fetchListData(parseInt(tab.name));
            },
            changeType(type) {
                if (!type) {
                    return
                }
                let arr = [{
                    label: "熔炉生物",
                    value: "FORGEANI"
                }]
                let single = arr.filter(val => {
                    return val.value == type;
                })
                return single[0].label;
            },
            fetchListData(val) {
                this.axios.get('/activity/ani', {
                    params: {
                        category: val
                    }
                })
                    .then(res => {
                        this.listData = res.data;
                    })
            },
            goAdd() {
                // 不传id时为新增
                this.$router.push('/AniUpdate');
            },
            goDetail(index, row) {
                this.axios.get('/activity/ani/single', {
                    params: {
                        id: row._id
                    }
                })
                    .then(res => {
                        this.itemDetailData = res.data;
                        this.dialogVisible = true;
                    })
            },
            goUpdate(index, row) {
                this.$router.push({
                    path: '/AniUpdate',
                    query: {
                        id: row._id
                    }
                })
            }
        },
    }
</script>

<style lang="scss">
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .content .el-tabs {
        max-width: 85%;
    }
</style>
<style lang="scss" scoped>
    .hero-list-container {
        position: relative;
        padding: 16px;

        .btn-pos {
            position: absolute;
            right: 12px;
            top: 12px;
            z-index: 1;
        }
    }
</style>